<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container>
      <div slot="detail" class="table-page-search-wrapper">
        <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="false" :loading="loading" :columns="columns"
          :dataSource="pageData">
          <template slot="indexNo" slot-scope="text,record,index">
            <span>{{ index + 1 }}</span>
          </template>
          <!--操作-->
          <template slot="action" slot-scope="text, record">
            <a-button @click="onResumptionLeave(record)" type="link" style="padding: 0">销假</a-button>
          </template>
        </z-table>
      </div>
    </j-form-container>
  </a-spin>
</template>

<script>
import { getOutLeaveRecordList, resumptionLeave } from "@api/sjsk/personService";
export default {
  data() {
    return {
      confirmLoading: false,
      loading: false,
      columns: [
        // {
        //   title: '序号', dataIndex: 'order', width: 40, align: 'center',
        //   customRender: (text, record, index) =>
        //     `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize +
        //     (index + 1)}` //序号分页后连续
        // },
        {
          title: '序号',
          dataIndex: 'indexNo',
          width: 80,
          align: 'center',
          scopedSlots: { customRender: 'indexNo' },
        },
        {
          title: '活动范围',
          dataIndex: 'activityScope',
          // width: 100,
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={text} length={14} />
          },
        },
        {
          title: '请假开始时间',
          dataIndex: 'startDate',
          align: 'center',
        },
        {
          title: '请假结束时间',
          dataIndex: 'endDate',
          align: 'center',
        },
        {
          title: '请假时长',
          dataIndex: 'outDay',
          align: 'center',
        },
        {
          title: '请假事由',
          dataIndex: 'outReason',
          align: 'center',
          customRender: (text) => {
            return text ? text : '--'
          }
        },
        {
          title: '操作',
          width: 80,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageData: {},
      sjskPersonId: ""
    }
  },
  methods: {
    show(record) {
      this.sjskPersonId = record.id
      this.refreshTable()
    },
    submitForm() {
      this.$emit('ok');
    },
    refreshTable() {
      this.loading = true
      getOutLeaveRecordList(this.sjskPersonId).then(res => {
        if (res.success) {
          this.loading = false
          this.pageData = res.result
        }
      }).catch(err => {

      })
    },
    onResumptionLeave(record) {
      let that = this
      this.$confirm({
        title: `确定销假吗?`,
        onOk() {
          resumptionLeave(record.id).then((res) => {
            if (res.success) {
              that.refreshTable()
              that.$message.success(res.message ? res.message : '操作成功')
            } else {
              that.$message.warn(res.message ? res.message : '操作失败')
            }
          }).catch(e => {
            that.$message.warn("操作失败！")
          })
        },
        onCancel() {
          console.log('Cancel')
        },
        class: 'confirm',
      })
    }
  }
}
</script>
